﻿<div id="title_template" style="display: none;">
    <div class="row-fluid">
        <div class="span6" >
            <div class="row-fluid"><a href="#" data-bind="click: function() { $root.folder.selectDetailsPopUp($data); }"><span data-bind="text: $data.Title"></span></a></div>
            <p><small data-bind="text: $data.Description"></small></p>
        </div>
        <div class="span6"><img data-bind="attr: {src: $data.Photo}" /></div>
    </div>
</div>
<div id="content_template" style="display: none;">
    <a><i class="icon-envelope"></i></a>
    <p data-bind="text: $data.Description"></p>
</div>
<div class="breadcrumb">
    <div class="btn-toolbar" style="margin-top: 2px;">
        <button class="btn btn-small" data-bind="click: function(){ $root.folder.loadFolders(); }, tooltip: {title: 'Refresh', placement: 'bottom', trigger: 'hover', delay{show:500, hide:100}"><i class="icon-repeat"></i></button>
        <button class="btn btn-small" data-bind="click: function(){ $root.folder.moveToTrash(); }, tooltip: {title: 'Delete message/s', placement: 'bottom', trigger: 'hover', delay{show:500, hide:100}"><i class="icon-trash"></i></button>
        <div class="btn-group" data-bind="with: folder, tooltip: {title: 'Move to', placement: 'bottom', trigger: 'hover', delay{show:500, hide:100}">
            <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-folder-close"></i>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" data-bind="foreach: folders">
                <li data-bind="visible: $data.FolderType() == 3">
                    <a data-bind="click: function() { $root.folder.moveToFolder($data); }" href="#">
                        <span data-bind="text: Name"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="alert alert-info" data-bind="visible: $root.folder.mesSentAlertVisible" align="center">
    Your message has been successfully sent!
</div>
<div data-bind="with: folder">
    <div data-bind="with: workingFolder">
        <ul data-bind="foreach: Messages" class="unstyled">
            <li class="row" style="margin-left: 7px;">
                <a data-bind="click: function() { $root.folder.selectMessageUser($data); }" href="#">
                    <div class="span1" style="width: 15px;">
                        <input type="checkbox" data-bind="checked: IsChecked"/>
                    </div>
                    <div data-bind="with: Sender" class="span2">
                        <span data-bind="text: Title"></span>
                    </div>
                    <div class="span4">
                        <span data-bind="foreach: Receivers" class="unstyled">
                            <span data-bind= "text: Title"></span><span>,</span>
                        </span>
                    </div>
                    <div class="span3">
                        <span data-bind="text: Subject"></span>
                    </div>
                    <div class="span1">
                        <span data-bind="text: Created"></span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>